<template>
    <div>
        <el-descriptions title="基础信息"></el-descriptions>
        <el-form ref="form" :model="param" label-width="140px">
            <el-row>
                <el-col :span="5">
                    <el-form-item label="订单状态">
                        <el-input :value="param.orderStatus == 0 ? '待审核' :
                            param.orderStatus == 1 ? '待调度' :
                                param.orderStatus == 2 ? '运输中' :
                                    param.orderStatus == 3 ? '已签收' :
                                        param.orderStatus == 4 ? '已拒绝' : '已取消'" :disabled="true"
                            style="width: 180px;">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="客户/用户">
                        <el-input v-model="param.name" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="异常单号">
                        <el-input v-model="param.id" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="运单号">
                        <el-input v-model="param.waybillId" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="5">
                    <el-form-item label="订单号">
                        <el-input v-model="param.orderId" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="发货地址">
                        <el-input v-model="param.fahuoAddress" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="收货地址">
                        <el-input v-model="param.address" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="(实)发车时间">
                        <el-input v-model="param.actualTime" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="5">
                    <el-form-item label="合作商">
                        <el-input v-model="param.companyName" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="司机">
                        <el-input v-model="param.driverName" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="车牌号">
                        <el-input v-model="param.carNum" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="联系方式">
                        <el-input v-model="param.tel" :disabled="true" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-descriptions title="货物明细"></el-descriptions>
            <el-table :data="tableData" stripe style="width: 80%;margin:0 88px 30px ">
                <el-table-column prop="goodsId" label="序号" width="150"></el-table-column>
                <el-table-column prop="goodsName" label="货物名称"></el-table-column>
                <el-table-column prop="goodsNum" label="数量"></el-table-column>
                <el-table-column prop="tiJi" label="体积"></el-table-column>
                <el-table-column prop="weight" label="重量"></el-table-column>
            </el-table>


            <el-descriptions title="异常事件信息"></el-descriptions>
            <el-descriptions class="custom-descriptions" title="说明" :column="4" style="width: 80%;margin: 0 88px 30px;">
                <el-descriptions-item label="事件类型">
                    {{
                        param.eventType === '0' ? '交通事故' :
                            param.eventType === '1' ? '车辆事故' :
                                param.eventType === '2' ? '货物破损' :
                                    param.eventType === '3' ? '地址错误' :
                                        '收件人拒收'
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="事件时间">{{ param.eventTime }}</el-descriptions-item>
                <el-descriptions-item label="事件地点">{{ param.eventLocation }}</el-descriptions-item>
                <el-descriptions-item label="事件说明">{{ param.eventDescription }}</el-descriptions-item>
                <el-descriptions-item label="上报人">{{ param.processorId }}</el-descriptions-item>
                <el-descriptions-item label="上报时间">{{ param.reportTime }}</el-descriptions-item>
            </el-descriptions>



            <el-descriptions title="异常处理"></el-descriptions>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="事故原因">
                        <el-input v-model="param.eventDescription" style="width: 900px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="事故影响">
                        <el-input v-model="param.remark" style="width: 900px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="处理措施">
                        <el-input v-model="param.processingMeasures" style="width: 900px;"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <br>
        <!-- 这里是按钮的部分 -->
        <div class="fixed-buttons">
            <button class="btn-cancel" @click="cancel">取消</button>
            <button class="btn-save" @click="saveData">保存</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {

        return {
            // id: id,
            param: {},
            tableData: [],//表格对象
        }
    },

    methods: {
        queryOthersById(id) {
            console.log(id);
            this.$axios.get('api/exception/queryOthersById/' + id)
                .then(response => {
                    if (response.data.code == 200) {
                        this.param = response.data.data;

                        // 如果没有 goodsList, 你可以直接从返回的 data 对象提取数据构造 tableData
                        this.tableData = [{
                            goodsId: this.param.goodsId,
                            goodsName: this.param.goodsName || "未知", // 如果没有值，可以用默认值
                            goodsNum: this.param.goodsNum,
                            tiJi: this.param.tiJi,
                            weight: this.param.weight
                        }];

                        this.setName();    // 确保在数据查询前处理客户/用户名称
                        this.setAddress(); // 确保在数据查询前处理地址
                    }
                })
        },
        setName() {
            if (this.param.customerName != null && this.param.customerName != '') {
                this.param.name = this.param.customerName;  // 如果存在客户ID，显示客户名称
            } else if (this.param.usersName) {
                this.param.name = this.param.usersName;  // 如果存在用户ID，显示用户名称
            }
        },
        setAddress() {
            if (this.param.caddress != null && this.param.caddress != '') {
                this.param.address = this.param.caddress;
            } else if (this.param.uaddress) {
                this.param.address = this.param.uaddress;
            }
        },
        cancel() {
            this.$router.push({ path: '/exception' });
        },
        saveData() {
            this.$axios.post('api/exception/saveData',this.param)
                .then(response => {
                    if (response.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.$router.push({ path: '/exception' });
                    }
                })
        }
    },
    created() {
        let id = localStorage.getItem("idInfo");
        if (id) {
            id = JSON.parse(id);
        };

        this.queryOthersById(id);  // 获取数据
    }
}
</script>

<style scoped>
/* 自定义样式 */
.custom-descriptions {
    background-color: #f9f9f9;
    /* 设置背景色 */
    border-radius: 8px;
    /* 圆角边框 */
    padding: 20px;
    /* 内边距，增加整体间距 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    margin-top: 20px;
    /* 顶部间距 */
}

.custom-descriptions .el-descriptions__header {
    font-size: 18px;
    /* 标题文字大小 */
    color: #333;
    /* 标题颜色 */
    font-weight: bold;
    /* 标题加粗 */
    margin-bottom: 20px;
    /* 标题和内容之间的间距 */
}

.custom-descriptions .el-descriptions-item {
    margin-bottom: 15px;
    /* 每一项的下方间距 */
}

.custom-descriptions .el-descriptions-item:last-child {
    margin-bottom: 0;
    /* 最后一项不需要额外的下边距 */
}

.custom-descriptions .el-descriptions-item label {
    font-weight: bold;
    /* 标签加粗 */
    color: #666;
    /* 标签文字颜色 */
}

.custom-descriptions .el-descriptions-item span {
    color: #333;
    /* 内容文字颜色 */
    font-size: 14px;
    /* 内容文字大小 */
}

.custom-descriptions .el-descriptions-item:even {
    background-color: #f5f5f5;
    /* 为偶数项添加背景色 */
    padding: 10px 15px;
    /* 内部间距 */
}

.custom-descriptions .el-descriptions-item:odd {
    padding: 10px 15px;
}

.custom-descriptions .el-descriptions-item .el-descriptions-item__label {
    font-size: 14px;
    /* 标签的字体大小 */
}

.custom-descriptions .el-descriptions-item .el-descriptions-item__content {
    font-size: 14px;
    /* 内容的字体大小 */
}

/* 调整宽度等 */
.custom-descriptions .el-descriptions-item[span='2'] {
    margin-right: 0;
    /* 当使用span="2"时，右侧间距设置为0 */
}

/* 按钮样式 */
.fixed-buttons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    gap: 10px;
    /* 设置按钮之间的间距 */
    z-index: 1000;
    /* 确保按钮在最上面 */
}

.btn-cancel,
.btn-save {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #409EFF;
    /* 按钮背景色 */
    color: white;
}

.btn-cancel {
    background-color: #f56c6c;
    /* 取消按钮背景色 */
}

.btn-save {
    background-color: #67C23A;
    /* 保存按钮背景色 */
}

.btn-cancel:hover,
.btn-save:hover {
    opacity: 0.8;
}
</style>